<template>
  <div class="flex flex-row h-screen ">
    <div class="flex flex-col justify-between">
      <!--左侧菜单区域-->
      <ul class="menu  w-48 ">
        <li @click="clickMenu('task')"><a class="h-12 flex text-center px-4"
                                          :class="activeMenu==='task'?'menu-focus':''">传输文件</a></li>
        <li @click="clickMenu('receive')"><a class="h-12 flex text-center px-4"
                                             :class="activeMenu==='receive'?'menu-focus':''">接收文件</a></li>
        <li @click="clickMenu('chat')"><a class="h-12 flex text-center px-4"
                                          :class="activeMenu==='chat'?'menu-focus':''">对话框</a></li>
        <li @click="clickMenu('create')"><a class="h-12 flex text-center px-4"
                                            :class="activeMenu==='create'?'menu-focus':''">创建传输任务</a></li>
      </ul>

      <div>
        <label for="my-drawer-4" class=" btn btn-circle m-4">设置</label>
        <div v-if="connected" class="badge badge-soft badge-primary">已连接Remote</div>
        <div v-else class="badge badge-soft badge-warning">未连接Remote</div>
      </div>
    </div>
    <!--主要区域 -->
    <div class=" flex-auto overflow-auto">
      <router-view></router-view>
    </div>
  </div>

  <div class="drawer drawer-end ">
    <input id="my-drawer-4" type="checkbox" class="drawer-toggle"/>
    <div class="drawer-side ">
      <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay "></label>
      <div class="menu bg-base-200 text-base-content h-full w-80 m-0 ">
        <div class="m-2">
          <fieldset class="fieldset">
            <label class="label">本机IP</label>
            <input type="text" class="input" v-model="localIp" readonly/>
          </fieldset>
          <fieldset class="fieldset">
            <label class="fieldset-legend">Remote IP</label>
            <input type="text" placeholder="Primary" v-model="remoteIp" class="input input-primary"/>
          </fieldset>

          <div class="my-8">
            <button class="btn btn-outline btn-primary" @click="clickConnect">Chat连接</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {useRouter} from "vue-router";
import AlertMessage from "@/views/components/AlertMessage.vue";
import {ChatMsg, FileTask, TaskStatus} from "@/models/task.ts";
import {useTaskStore} from "@/stores/task.ts";
import {useChatStore} from "@/stores/chat.ts";

const chatStore = useChatStore();
const taskStore = useTaskStore();
const router = useRouter()

const activeMenu = ref("")

console.debug(">>> App 挂载了... ")

const localIp = ref('')

const remoteIp = ref('')

const connected = ref(false)

if (chatStore.remoteIp) {
  connected.value = true;
  remoteIp.value = chatStore.remoteIp;
}

const clickConnect = async () => {
  console.log(`click connect ... `)
  if (!remoteIp.value) {
    return;
  }
  // 打开连接
  if (await window.chat.openSend(remoteIp.value)) {
    chatStore.setRemoteIP(remoteIp.value.trim())
    chatStore.setPeerIP(remoteIp.value.trim())
    connected.value = true
  } else {
    AlertMessage.warning("Chat连接失败")
    connected.value = false;
  }

  await window.chat.open(remoteIp.value)
}

const clickMenu = (key: string) => {
  console.log(`click ${key}...`)
  activeMenu.value = key;

  router?.replace({path: `/${key}`})
}


// 在 HTML/JS 中定义回调函数
window.chat.onReceive((message) => {
  console.log(">>>收到的消息: ", message)
  // 处理接收到的消息，例如更新 UI
  chatStore.addToList(new ChatMsg(message.message, false, message.from))

  chatStore.setPeerIP(message.from)
});

window.chat.onStdout((message: any) => {
  // console.log(">>> stdout message = ", message)
  let data = JSON.parse(message.content)

//{cmd:cmd,content:content}
  if (message.cmd == 'receive') {
    console.log("receive data = "+JSON.stringify(data))

    const task = new FileTask(data.id, data.filePath, data.totalSize, data.isDir);
    task.from = data.remoteIp
    task.status = TaskStatus.RUNNING

    // console.log("convert task = ",task)
    taskStore.addToReceiveList(task)

  } else if (message.cmd == 'progress') {
    console.log("progress data = "+JSON.stringify(data))
    taskStore.updateProgress(data.id,data.file, data.progressValue ,data.isReceive)
  }
});

//获取本机IP
window.electron.localIp().then((ip: string) => localIp.value = ip)

</script>

<style scoped>
.drawer-overflow {
  overflow-y: hidden;
}
</style>
